<template>
    <div class="project-map-content">
        <div id="container" ref="containerRef"></div>
        <div class="top">
            <el-button @click="toList">项目管理/列表模式</el-button>
        </div>
        <div class="bottom">
            <div>
                <p class="num">{{ statisticsData.项目类型 ? statisticsData.项目类型.工程建设项目 : 0 }}</p>
                <p class="name">工程项目</p>
            </div>
            <div>
                <p class="num">{{ statisticsData.项目类型 ? statisticsData.项目类型.民生服务项目 : 0 }}</p>
                <p class="name">民生项目</p>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import markerImg from "@/assets/project-map.png";

declare global {
    interface Window { chooseCurProject: any }
}
@Component({
    name: "ProjectMap"
})
export default class ProjectMap extends Vue {
    // 地图实例
    map: any = null
    // 覆盖物/标记点
    marker: any = null
    // 经度
    lng = 0
    // 维度
    lat = 0
    tableData: any[] = []
    // 当前项目的基本信息
    projectInfo = {
        name: "",
        type: 0,
        investor: "",
        projectContent: "",
        totalInvestment: "",
        leadName: "",
        responsible: "",
        stageName: "",
        remarks: "",
        projectAuth: [],
        resImgList: [],
        stage: [],
        endDate: "",
        address: "",
        process: 0,
        stageCompleteStatus: 0,
        completeStatus: 0
    };

    // 获取当前区域所有的人员
    projectAuthList: any[] = [];
    infoWindow: any = null
    // 当前正在选择的项目列表
    nowProjectList: any[] = []
    statisticsData = {};

    // 获取成员列表和权限列表做对比  找出项目查看成员
    get authString() {
        if (!this.projectInfo.name) return "";
        const authList: any[] = [];
        this.projectAuthList.forEach((item: any) => {
            for (const i of this.projectInfo.projectAuth) {
                if (i === item.id) {
                    authList.push(item.name);
                }
            }
        });
        return authList;
    }

    get AMap() {
        return this.$store.state.aMap;
    }

    created() {
        this.getMember();
        this.getCountDetail();
        window.chooseCurProject = (e: any) => {
            this.infoWindow.close();
            const id = e.getAttribute("data-id");
            this.getProjectInfo(this.nowProjectList.filter((item: any) => item.id === id)[0]);
        };
    }

    mounted() {
        this.getData();
    }

    async getCountDetail() {
        const res = await this.$server["project/countDetail"]({
        });
        if (res.data.code === 200) {
            this.statisticsData = res.data.data;
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }


    toList() {
        this.$router.push({
            name: "ProjectList"
        });
    }

    async getMember() {
        const response = await this.$server["org/getMember"]({
            data: {
                departmentId: "",
                pageSize: 999999,
                currentPage: 1
            },
            loader: false
        });
        if (response.data.code === 200) {
            this.projectAuthList = response.data.data.records;
        }
    }

    async getData() {
        const res = await this.$server["project/getMapData"]({
            data: {}
        });
        if (res.data.code === 200) {
            if (res.data.data) {
                this.tableData = [];
                Object.keys(res.data.data).forEach((key: any) => {
                    this.tableData.push({
                        lngLat: key,
                        lng: key.split(",")[0],
                        lat: key.split(",")[1],
                        projectList: res.data.data[key]
                    });
                });
            }
        }
        this.getCenter();
    }

    async getCenter() {
        const res = await this.$server.getCurrentLocation({
            data: {}
        });
        if (res.data.code === 200) {
            this.lng = Number(res.data.data.longitude);
            this.lat = Number(res.data.data.latitude);
        }
        this.initPage();
    }

    async initPage() {
        const _aMap = this.AMap || await this.$store.dispatch("loadAMap");
        const AMap = _aMap;

        const center: any = this.lng ? [this.lng, this.lat] : null;

        this.map = new AMap.Map("container", {
            resizeEnable: true, // 是否监控地图容器尺寸变化,
            center: center,
            zoom: 10
        });

        const markerList: any[] = [];

        this.tableData.forEach((item: any) => {
            markerList.push(this.setMarker(AMap, item));
        });

        this.map.add(markerList);
    }

    setMarker(AMap: any, item: any) {
        const icon = new AMap.Icon({
            image: markerImg,
            size: new AMap.Size(50, 64),
            imageSize: new AMap.Size(50, 64)
        });
        const marker = new AMap.Marker({
            position: new AMap.LngLat(item.lng, item.lat),
            icon: icon,
            offset: new AMap.Pixel(-25, -64),
            // 设置是否可以拖拽
            draggable: false
        });
        marker.on('click', (e: any) => {
            if (e.type === "click") {
                this.map.setCenter([item.lng, item.lat]);
                if (item.projectList.length > 1) {
                    // 多个项目同个地址
                    this.chooseProject(item, AMap);
                } else {
                    this.getProjectInfo(item.projectList[0]);
                }
            }
        });
        return marker;
    }

    async getProjectInfo(item: any) {
        const AMap = this.AMap;
        const res = await this.$server["project/editItem"]({
            data: {
                id: item.id
            },
            loader: false
        });
        if (res.data.code === 200) {
            this.projectInfo = res.data.data;
            this.setContent(item, AMap);
        }
    }

    chooseProject(item: any, AMap: any) {
        let lis = "";
        item.projectList.forEach((cur: any) => {
            lis += `<li data-id="${cur.id}" onclick="chooseCurProject(this)">${cur.name}</li>`;
        });
        this.nowProjectList = item.projectList;
        const content = `<div class="project-list">
            <p>选择项目</p>
            <ul>
                ${lis}
            </ul>
        </div>`;

        this.infoWindow = new AMap.InfoWindow({
            content: content,
            anchor: "middle-left"
        });

        this.infoWindow.open(this.map, [item.lng, item.lat]);
    }

    setContent(item: any, AMap: any) {
        const word = [{
            color: "#de2728",
            text: "延迟"
        }, {
            color: "#32A78F",
            text: "正常"
        }, {
            color: "#32A78F",
            text: "提前"
        }];
        const useWord = word[this.projectInfo.completeStatus - 1];
        const content = `
            <div class="body-header">
                <div>
                    <p>
                        <strong>${this.projectInfo.name}</strong>
                        <span style="background-color: ${useWord.color}" v-if="projectInfo.stageCompleteStatus === 1">${useWord.text}</span>
                    </p>
                    <div class="line">
                        <span>实际进度</span>
                        <div class="process-box">
                            <div class="all"></div>
                            <div class="real" style="width: ${(this.projectInfo.process * 1.2) + 'px'}"></div>
                            <span class="text">${this.projectInfo.process || 0}%</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="body-container">
                <div class="body-left">
                    <div class="basic-info">
                        <ul>
                            <li>
                                <span>项目类型：</span>
                                <em>${this.projectInfo.type === 2 ? '工程项目' : "民生项目"}</em>
                            </li>
                            <li>
                                <span>投资方：</span>
                                <em>${this.projectInfo.investor}</em>
                            </li>
                            <li>
                                <span>投资总额（万元）： </span>
                                <em>${Number(this.projectInfo.totalInvestment) / 10000}</em>
                                </li>
                                <li>
                                    <span>负责单位/人：</span>
                                    <em>${this.projectInfo.responsible}</em>
                            </li>
                            <li>
                                <span>牵头领导：</span>
                                <em>${this.projectInfo.leadName}</em>
                            </li>
                            <li>
                                <span>项目地址：</span>
                                <em>${this.projectInfo.address}</em>
                            </li>
                            <li>
                                <span>项目计划完成时间： </span>
                                <em>${this.projectInfo.endDate}</em>
                            </li>
                            <li>
                                <span>项目查看权限：</span>
                                <em>${this.authString.toString()}</em>
                            </li>
                            <li>
                                <span>项目建设内容：</span>
                                <em>${this.projectInfo.projectContent}</em>
                            </li>
                            <li>
                                <span>备注：</span>
                                <em>${this.projectInfo.remarks}</em>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        `;

        this.infoWindow = new AMap.InfoWindow({
            content: content
        });

        this.infoWindow.open(this.map, item.lngLat.split(","));
    }
}
</script>

<style lang="scss" scoped>
.project-map-content {
    width: 100%;
    height: calc(100% - 24px);
    margin-top: 24px;
    position: relative;
    .top {
        position: absolute;
        top: 10px;
        left: 10px;
        width: 100%;
    }
    .bottom {
        background: rgba(255,255,255,.8);
        width: 46%;
        height: 134px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 74px;
        @include flexLayout(flex,justify,center);
        div {
            width: 50%;
            p {
                margin: 0;
                text-align: center;
            }
            .num {
                font-size: 32px;
                font-family: "PingFang SC";
                font-weight: bold;
                line-height: 45px;
                color: #de2728;
            }
            .name {
                font-size: 14px;
                font-family: "PingFang SC Medium";
                line-height: 20px;
                color: #37383A;
            }
        }
    }
}
#container {
    width: 100%;
    height: 100%;
}
</style>
<style lang="scss">
.amap-info-content {
    .body-header {
        width: 460px;
        background: #ffffff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 12px;
        & > div {
            display: flex;
            p {
                margin: 0;
                padding: 8px 0;
                strong {
                    font-size: 16px;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #2c82c9;
                }
                span {
                    background: #2c82c9;
                    padding: 0 10px;
                    line-height: 20px;
                    text-align: center;
                    border-radius: 11px;
                    color: #ffff;
                    margin-left: 10px;
                    font-size: 12px;
                    font-weight: 400;
                    font-family: "PingFang SC Medium";
                }
            }
        }
        .line {
            display: flex;
            align-items: center;
            margin-left: 6px;
            span {
                font-size: 14px;
                color: #37383a;
                margin-right: 6px;
            }
            .process-box{
                width: 158px;
                height: 18px;
                position: relative;
            }

            .all {
                width: 120px;
                height: 6px;
                background: #EBEEF5;
                border-radius: 3px;
                position: absolute;
                left: 0;
                top: 6px;
                z-index: 20;
            }
            .real {
                height: 6px;
                background: #de2728;
                border-radius: 3px;
                position: absolute;
                left: 0;
                top: 6px;
                z-index: 30;
            }
            .text {
                color: #606266;
                position: absolute;
                right: -10px;
                top: 0;
                line-height: 18px;
            }
        }
        .el-button {
            display: inline-block;
            line-height: 1;
            white-space: nowrap;
            cursor: pointer;
            background: #de2728;
            border: 1px solid #de2728;
            color: #ffffff;
            -webkit-appearance: none;
            text-align: center;
            box-sizing: border-box;
            outline: none;
            margin: 0;
            transition: 0.1s;
            font-weight: 500;
            padding: 10px 20px;
            font-size: 14px;
            border-radius: 4px;
        }
    }
    .body-container {
        width: 460px;
        display: flex;
        justify-content: space-between;
        position: relative;
        overflow: hidden;
        .body-left {
            width: 100%;
            padding: 0 12px 24px;
            background: #ffffff;
        }
        .basic-info {
            p {
                font-size: 16px;
                color: #37383a;
                padding-left: 6px;
                border-left: 2px solid #de2728;
            }
            li {
                display: flex;
                margin-top: 12px;
                font-size: 14px;
                span {
                    color: #aaaaaa;
                    font-size: 14px;
                    width: 130px;
                    text-align: right;
                }
                em {
                    font-style: normal;
                    color: #37383a;
                    width: calc(100% - 130px);
                    @include textEllipsis();
                }
            }
        }
        .info-node {
            margin-top: 24px;
            p {
                font-size: 16px;
                color: #37383a;
                padding-left: 6px;
                border-left: 2px solid #de2728;
            }
            /deep/.el-table {
                margin-top: 24px;
            }
        }
        .img-info {
            margin-top: 24px;
            & > div {
                width: 160px;
                height: 160px;
                background-image: url("~@/assets/no-img.png");
                background-size: 160px 160px;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-top: 12px;
            }
            p {
                font-size: 16px;
                color: #37383a;
                padding-left: 6px;
                border-left: 2px solid #de2728;
            }
            ul {
                display: flex;
                flex-wrap: wrap;
                margin-top: 12px;
                li {
                    width: 160px;
                    height: 160px;
                    border-radius: 2px;
                    overflow: hidden;
                    margin-top: 12px;
                    border: 1px solid #ccc;
                    img {
                        width: 160px;
                        height: 160px;
                    }
                    & + li {
                        margin-left: 12px;
                    }
                    &:nth-child(7) {
                        margin-left: 0;
                    }
                }
            }
        }
    }
    .project-list {
        padding: 10px 10px 10px 0;
        background: #fff;
        p {
            margin: 0 0 14px 8px;
            font-size: 16px;
        }
        ul {
            width: 200px;
            max-height: 200px;
            overflow-y: auto;
            li {
                font-size: 16px;
                color: #9DA1A4;
                cursor: pointer;
                line-height: 28px;
                padding-left: 8px;
                @include textEllipsis();
                &:hover {
                    color: #de2728;
                }
            }
        }
    }
}
</style>
